<template>
<!-- 牛逼 -->
  <div class="home-banner">
<XtxSlider :sliders="sliders" :autoPlay="true"/>
  </div>
</template>

<script>
import { findBanner } from '@/api/home'
import { onMounted, ref } from 'vue'
export default {
  name: 'HomeBanner',
  // vue2.0写法：
  // data () {
  //   return {
  //     sliders: []// 轮播图列表
  //   }
  // },
  // created () {
  //   this.re()
  // },
  // methods: {
  //   async re () {
  //     const res = await findBanner()
  //     console.log(res)
  //     this.sliders = res.result
  //   }
  // }
  // vue3.0
  setup () {
    const sliders = ref([])
    async function re () {
      const res = await findBanner()
      sliders.value = res.result
    }
    onMounted(() => {
      re()
    })
    return {
      sliders,
      re
    }
  }
}
</script>

<style scoped lang='less'>
.home-banner {
  width: 1240px;
  height: 500px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 98;
}
</style>
